<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getDictByCode } from "@/api/dictApi";

onMounted(() => {
  dict();
});
//下拉菜单列表
async function dict() {
  //分类
  let res2 = await getDictByCode(15);
  categoryOptions.value = res2.data.subDict;
  //型号
  let res3 = await getDictByCode(16);
  modelOptions.value = res3.data.subDict;
  //品牌
  let res4 = await getDictByCode(14);
  brandOptions.value = res4.data.subDict;
}
const categoryOptions = ref();
const modelOptions = ref();
const brandOptions = ref();
</script>

<template>
  <div>
    <!-- 咨询信息 -->
    <el-card style="margin-top: 30px">
      <template #header>
        <div class="card-header">
          <span>报价信息</span>
        </div>
      </template>
      <div style="margin-left: 20px">
        <div>
          <el-form :inline="true" style="margin: 20px auto">
            <el-form-item label="报价编码:">
              <el-input
                placeholder="根据询价编码自动生成子编码"
                clearable
                style="width: 240px"
              />
            </el-form-item>
            <el-form-item label="询价日期：" :required="true" label-width="170">
              <el-date-picker type="date" placeholder="下拉选择时间" />
            </el-form-item>
            <br />

            <el-form-item label="机器品牌：" :required="true">
              <el-select
                placeholder="下拉选择"
                clearable
                allow-create
                style="width: 240px"
              >
                <el-option
                  v-for="item in brandOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="机器型号：" :required="true" label-width="105">
              <el-select
                placeholder="下拉选择"
                clearable
                allow-create
                style="width: 240px"
              >
                <el-option
                  v-for="item in modelOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <br />
            <el-form-item label="公司是否做过" :required="true">
              <el-select placeholder="下拉选择" clearable style="width: 240px">
                <el-option label="是" value="1" />
                <el-option label="否" value="2" />
                <el-option label="未知" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="产品类型" :required="true">
              <el-select placeholder="下拉选择" style="width: 240px">
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <div>
      <!-- 产品信息 -->
      <el-card style="margin-top: 30px">
        <template #header>
          <div class="card-header">
            <span>产品信息</span>
          </div>
        </template>
        <div>
          <el-table border style="width: 100%">
            <el-table-column prop="picurl" label="产品名称" width="180" />
            <el-table-column prop="name" label="图号" width="180">
              <el-input style="width: 240px" placeholder="请输入" />
            </el-table-column>
            <el-table-column prop="model" label="材质" width="180">
              <el-input style="width: 240px" placeholder="请输入" />
            </el-table-column>
            <el-table-column prop="price" label="件数(pcs)" width="180">
              <el-input style="width: 240px" placeholder="请输入" />
            </el-table-column>
            <el-table-column prop="num" label="预计单重(kg/件)" width="180">
              <el-input style="width: 240px" placeholder="请输入" />
            </el-table-column>
            <el-table-column label="单价(USD/pcs)" width="180">
              <el-input style="width: 240px" placeholder="请输入" />
            </el-table-column>
            <el-table-column label="交期(天)" width="147">
              <el-input style="width: 240px" placeholder="请输入" />
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
